<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">

	<link rel="stylesheet" href="./css/login.css">
  <link rel="stylesheet" type="text/css" href="css/verify.css">

	<title>用户登录</title>

</head>
<body class="text-center">

	<form class="form-signin">
      	<img src="./images/logo.png" alt="" width="140" height="140">
      	<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
      	<label for="userName" class="sr-only">User name</label>
      	<input type="text" name="userName" class="form-control" id="userName" placeholder="User name" required="" autofocus="">
      	<label for="password" class="sr-only">Password</label>
      	<input type="password" name="password" class="form-control" id="password" placeholder="Password" required="">

        <div id="myVerify" class="mb-3">
          <input type="text" class="varify-input-code form-control" placeholder="Verification code">
        </div>

      	<div class="checkbox mb-3">
	        <label>
	          	<input type="checkbox" value="remember-me"> Remember me
	        </label>
      	</div>

      	<button id="check-btn" class="btn btn-lg btn-primary btn-block" type="button">Sign in</button>
      	<p class="mt-5 mb-3 text-muted">Copyright © 2018-2019</p>
    </form>

	<!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
	<script src="libs/jquery/jquery-3.2.1.js"></script>
    <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
    <script type="text/javascript" src="js/verify.min.js" ></script>
    <script type="text/javascript">
	$(document).ready(function() {

		$('#myVerify').codeVerify({
        type : 1,
        width : '300px',
        height : '46px',
        fontSize : '26px',
        codeLength : 6,
        btnId : 'check-btn',
        ready : function() {
        },
        success : function() {

      	        var userName = $('#userName').val();
      	        var password = $('#password').val();
      	        if(userName != "" ){
      	            if(password != ""){
      	                $.ajax({
      	                    type: "post",
      	                    async: false,
      	                    url: "/eshop-project/login/userlogin?userName=" + userName+"&password="+password,
      	                    success: function (data) {
      	                  	  if(data == "password wrong" || data == "userName not exits"){
      	                  		 alert(data);
      	                  		
      	                  	  }else{
	      	                  	 alert("登入成功");
	   	                  		 $.cookie('userId',data,{path:'/'});
	   	                  		 $(window).attr('location','index.html');	  
      	                  	  }
      	                       
      	                    },
      	                    fail: function (XMLHttpRequest, textStatus, errorThrown) {
      	                        alert("账号或密码输入有误");
      	                    },
      	                });
      	            }else{
      	                alert("请输入密码");
      	            }
      	        }else{
      	            alert("请输入账号");
      	        }
      	 
        },
        error : function() {
          alert('验证码不匹配！');
        }
      });


    });
    </script>
</body>
</html>